<template>
  <div class="departments">
    <!-- <div class="top">
      <div class="name">江苏传智</div>
      <div class="manager">负责人</div>
      <div class="option">操作</div>
    </div> -->
    <trees :nodeData="topData" :isShow="false"></trees>
    <hr />
    <div class="tree">
      <el-tree :data="treeData">
        <template class="custom-tree-node" v-slot="scope">
          <!-- <div class="top">
            <div class="name">{{ scope.data.label }}</div>
            <div class="manager">负责人</div>
            <div class="option">操作</div>
          </div> -->
          <trees
            :nodeData="scope.data"
            :isShow="true"
            @getTreeData="getTreeData"
          ></trees>
        </template>
      </el-tree>
      <!-- 新增弹出框 -->
      <add :resData="resData" @getTreeData="getTreeData"></add>
    </div>
  </div>
</template>

<script>
// 导入获取树形结构信息的方法
// import { companyDepartments } from '@/api/departments'
import { mapActions, mapState } from 'vuex'
export default {
  components: {
    trees: () => import('./commponents/trees'),
    add: () => import('./commponents/add')
  },
  data () {
    return {
      // topData: { name: '江苏传智', manager: '负责人', id: '' },
      // treeData: [
      //   // {
      //   //   label: '财务部',
      //   //   children: [
      //   //     {
      //   //       label: '薪资管理部',
      //   //       children: []
      //   //     }
      //   //   ]
      //   // }
      // ],
      // resData: []
    }
  },
  created () {
    this.getTreeData()
  },
  computed: {
    ...mapState('departments', ['topData', 'treeData', 'resData'])
  },
  methods: {
    ...mapActions('departments', ['getTreeData']),
    // 获取架构数据
    // async getTreeData () {
      // const res = await companyDepartments()
      // console.log(res)
      // const dataArr = res.depts
      // this.resData = res.depts
      // this.treeData = this.treeChange(dataArr, '')
      // this.getTreeData()
    // }
    // treeChange (dataArr, str) {
    //   return dataArr.filter(item => {
    //     if (item.pid === str) {
    //       item.children = this.treeChange(dataArr, item.id)
    //       return item
    //     }
    //   })
    // }
  }
}
</script>

<style lang="scss" scoped>
.departments {
  padding: 15px 130px;
  .top {
    display: flex;
    .name {
      flex: 1;
    }
    .manager {
      margin-right: 50px;
    }
  }
  .tree {
    .top {
      width: 100%;
    }
  }
}
</style>
